<!--侧边栏菜单树-->
<template>
    <div class="aside-menu-root">
        <div class="word-btn" @click="change">
            {{flag === false ? '展开':'关闭'}}
        </div>
        <el-menu
                :default-active="$route.path"
                :collapse="!flag"
                router
                class="el-menu-vertical-demo"
                @open="handleOpen"
                @close="handleClose"
                background-color="#545c64"
                text-color="#fff"
                active-text-color="#ffd04b">


            <el-menu-item v-for="(item, i) in data" :key="i" :index="item.url">
                <i :class="item.icon"></i>
                <span slot="title">{{item.menuName}}</span>
            </el-menu-item>

        </el-menu>
    </div>
</template>

<script>
    export default {
        name: "AsideMenuTree",
        data() {
            return {
                // 展开/关闭 标志位; true展开， false关闭
                flag: true,
                data: [],
            }
        },
        mounted() {
            let headNav = sessionStorage.getItem("headNav");
            let json = sessionStorage.getItem("userNav");
            let userNav = JSON.parse(json);
            userNav.forEach( item => {
                if (item.url === headNav) {
                    if (item.children) {
                        this.data = item.children;
                    }
                }
            })
        },
        methods: {
            change() {
                this.flag = !this.flag;
            },

            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            }
        }
    }
</script>

<style lang="scss" scoped>
    .aside-menu-root{

    }
    /*展开/关闭按钮*/
    .word-btn {
        color: white;
        height: 23px;
        margin-bottom: 3px;
        cursor: pointer;
        text-align: center;
    }
</style>
